<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			tr {
				text-align: center;
			}
			.head{background-color: #F5F5F5; height:1500PX ;}
			.div0 {background-color: white;
				width: 100%;
				height: 102px;
				text-indent: 3em;
				border-bottom: orangered 3px solid;
				margin-bottom: 25px;
			}
			
			.div0 img {
				position: relative;
				top: 23px;
				line-height: 102px;
			}
			
			#div1 {
				display: inline-block;
			}
			
			#div1 span {
				font: 1.9em "微软雅黑";
			}
			
			.body {background-color: white;
				width: 1260px;
				margin: 0 auto;
				height: auto;
			}
			.shan {
				cursor: pointer;
				position: relative;
				font: 16px bold;
				left: 60px;
				background-color: white;
				line-height: 25px;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			.shan:hover {
				color: white;
				background-color: orangered;
			}
			
			#head {
				position: relative;
				left: -209px;
			}
				
			.input {
				height: 40px;
				width: 120px;
				border: 1px darkgray solid;
				margin: 0 auto;
			}
			
			.input span {
				font: 20px bold;
				cursor: pointer;
				text-align: center;
				line-height: 38px;
				height: 40px;
				width: 40px;
				display: block;
				float: left;
			}
			
			.input span:hover {
				background-color: gainsboro;
			}
			#box:hover{
				background-color: white;
			}
			  #text {
				line-height: 25px;
				height: 25px;
				text-align: center;
				border: none;
				outline: none;
			}
			#quanxuan,
			#button1,
			#button2,
			#button3,
			#button4 {
				display: block;
				cursor: pointer;
				border: 1px solid gainsboro;
				background-color: white;
				width: 20px;
				height: 20px;
				margin: 0 auto;
			}
			
			.active {
				background-image: url(../day2/2017-08-01_195150.png);
			}
			
			#button1:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}
			#button2:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}#button3:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}#button4:hover {
				background-image: url(../day2/2017-08-01_195127.png);
				};
			#boy1 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#boy2 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#pay {cursor: pointer;
				font-size: 23px;
				background-color: #E0E0E0;
				color: gray;
				float: right;
				text-align: center;
				height: 60px;
				line-height: 50px;
				width: 180px;
			}
			.active0{color: white;
				background-color: orangered;
			}
			#tab_c {
				/*border: 1px solid;*/
				width: 100%;
				height: 2000px;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			.confirm h1 {
				position: relative;
				left: 150px;
				top: 50px;
			}
			
			#tab_c .confirm {
				position: relative;
				top: 300px;
				margin: 0px auto;
				/*border: 1px solid;*/
				width: 500px;
				height: 275px;
				background-color: white;
				z-index: 1;
			}
			
			.confirm li {
				float: left;
				list-style: none;
				margin: 30px 50px;
				position: relative;
				left: 50px;
				top: 100px;
				border: 1px solid;
				width: 100px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: white;
			}
			
			.confirm .quxiao {
				background-color: #E0E0E0;
			}
			
			.confirm .quxiao:hover {
				background-color: #B0B0B0;
			}
			
			.confirm .queding {
				background-color: #FF6700;
			}
			
			.confirm .queding:hover {
				background-color: #EA4B12;
			}
			#go {
				width: 100%;
				height: 1200px;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			#go ul {
				position: relative;
				top: 110px;
				left: 400px;
			}
			#go ul li {
				list-style-type: none;
				float: left;
				padding-right: 13px;
			}
			.fans {
				height: 300px;
				width: 237px;
				background-color: white;
			}
			.fans img {
				position: relative;
				left: 50px;
				top: 50px;
			}
			#go .circle1{color: #e0e0e0;
				border-radius: 50%;
				border: 1px solid;
				width: 20px;height: 20px;
				text-align: center;
			}
			#go ul li:hover  .circle2{
				margin-top: 3px;
				cursor: pointer;
				content: "";
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: gainsboro;
			}
			#go ul li :hover .active1{
			border-radius: 50%;
				border: 1px orangered  solid;
				width: 20px;height: 20px;
				text-align: center;
				
				}
			#go ul li :hover .active0{margin-top: 3px;
				cursor: pointer;
				content: "";
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: orangered;
			} 
			.font {
				font-family: "微软雅黑";
				position: relative;
				top: 40px;
				left: 10px;
				text-align: center;
			}
			.shan1 {
				cursor: pointer;
				position: relative;
				font: 20px bold;
				top: 90px;
				left: 1200px;
				background-color: white;
				line-height: 25px;
				text-align: center;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			.shan1:hover {
				color: white;
				background-color: orangered;
			}
			#add{float: left;
			position: relative;left: 16px;font: 16px  bold grey  "微软雅黑";
			}
			.add2{cursor: pointer;
				position: relative;
			top: 490px;
			left:570px;
				display: block; text-align:center ;
			width: 140px;line-height: 35px;
			background-color: gainsboro;color: gray;}
			.add2:hover{color: white;
				background-color:grey;
			}
			#add1{color: white;
				background-color: orangered;
				border-radius: 50%;
			width: 25px;height: 25px;
			outline: none;
			border: none; 
			}
		/*下面物品*/	
		   .td4{
		   	color: orangered;
		   }
			#new {
				width: 1200px;
				height: 620px;
				margin-left: auto;
				margin-right: auto;
				padding-top: 10px;
				padding-bottom: 20PX;
			}
			
			#new li {
				width: 230px;
				height: 300px;
				background-color: white;
				float: left;
				list-style-type: none;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				margin: 0px 5px;
				margin-top: 10px;
				cursor: pointer;
			}
			
			#new .text {
				color: #333333;
			}
			
			#new .cost {
				color: #FF6700;
			}
			
			.jia {
				color: #757575;
			}
			
			#new .jia div {
				width: 124px;
				margin-left: auto;
				margin-right: auto;
				font-size: 14px;
				cursor: pointer;
			}
			
			#new .picture {
				margin-top: 50px;
			}
			
			#new li:hover .jia div {
				border: 1px solid #FF6700;
			}	
	  .last{width:1330px;
	  height: 430px;
	  	margin: 0 auto;}
	  .good{cursor: pointer;
	  	margin-left: 20px;
	  	margin-top: 30px;display: inline-block;
	  	 width: 122px;height: 30px;
	  	}
		</style>
	</head>

	<body>
		<div class="head">
			<div class="div0">
				<img src="img/logo.png" />
				<div id="div1"> <span>我的购物车</span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			</div>
			<div class="body">
				<table id="buy" border="1" cellspacing="0" cellpadding="0" width="100%">
					<tbody id="tdbody">
						<tr height="72">
							<td width="40">
								<span id="quanxuan"></span></td>
							<td width="522"><span id="head">全选</span> 商品名称</td>
							<td width="80">单价</td>
							<td width="150">数量</td>
							<td>小计</td>
							<td style="position: relative;left: -26px;">操作</td>
						</tr>
						<tr height="118">
							<td width="40">
								<span id="button1"></span>
							</td>
							<td><img src="img/pms_1474944620.67265595!220x220.jpg" height="126" width="140" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
							</tr>
						<tr>
							<td></td>
							<td colspan="5" style="border: 1px #DCDCDC solid;">
								<span id="add">
				<input type="button" name="" id="add1" value="+" onclick="add1()" />小米风扇购买
				</span>
							</td>
						</tr>
						
						<tr height="118">
							<td width="40">
								<span id="button2"></span>
							</td>
							<td><img src="../day2/xmad_15008876143703_gOecR.jpg" height="76" width="90" />
							</td>
							<td >199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span  id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td  style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="118">
							<td width="40">
								<span id="button3"></span>
							</td>
							<td><img src="../day2/xmad_15009767233099_uIQSM.jpg" height="76" width="90" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
							</tr>
						<tr>
							<td></td>
							<td colspan="5" style="border: 1px #DCDCDC solid;">
								<span id="add">
				<input type="button" name="" id="add1" value="+" onclick="add1()" />小米风扇购买
				</span>
							</td>
						</tr>		
						
						<tr height="118">
							<td width="70">
								<span id="button4"></span>
							</td>
							<td><img src="../day2/xmad_15009492598428_qSuMH.jpg" height="76" width="90" /></td>
							<td>166</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>

								</div>
							</td>
							<td style="color:orangered;">166</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						
					</tbody>
				</table>
				<div height="40">
							<span style="color:gray;">继续购物</span>
							<span style="color:gray;">共</span>
								<span style="color: orangered;">4</span><span style="color:gray">件商品，已选择</span><span style="color: orangered;">0</span><span style="color:gray;">件</span>
							
							<div style="float: right;"><span style="color: orangered;font-family: '微软雅黑';">合计(不含运费):<span  id="foot" style="font-size:35px ;"><strong >0.00</strong></span></span>
								<span id="pay">去结算</span>
							</div>
						</div>
				</div>
				<h1 align="center" style="font:52px bold  '微软雅黑';color: gray;margin-top: 10px;">买购物车的人还买了</h1>
			<!--新添加产品-->
			<div id="new">
			<ul>
						<li>
							<div class="picture" style="margin-top: 0px;">
								<img src="imgIM.ADDBUY/gouwuche!234x300.jpg" />
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1479725604.55185875!140x140.jpg" />
							</div>
							<div class="text">
								小米Note2全球版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1492759812.15846532!140x140.jpg" />
							</div>
							<div class="text">
								小米5c移动版3G内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1490088808.15771543!140x140.jpg" />
							</div>
							<div class="text">
								红米Note2全球版6G内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1490088813.05223210!140x140.jpg" />
							</div>
							<div class="text">
								小米MIX尊享版全面屏概念
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
					</ul>
					<ul>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1493907625.66266569!140x140.jpg" />
							</div>
							<div class="text">
								ZMI10号移动电源
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1493907625.66266569!140x140.jpg" />
							</div>
							<div class="text">
								小米MIX尊享版全面屏概念
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1498704556.87635170!140x140.jpg" />
							</div>
							<div class="text">
								小米Note2全球版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1502098360.63228592!140x140.jpg" />
							</div>
							<div class="text">
								红米Note4全网通4G版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									3.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1479725604.55185875!140x140.jpg" />
							</div>
							<div class="text">
								红米Note4全网通4G版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
					</ul>
				</div>
				</div>	
			<div class="last">
				<img src="imgIM.ADDBUY/bottom1.png"/>
				<img src="imgIM.ADDBUY/bottom2.png" />
			</div>	
				<!--模态框1购物-->
				<div id="go">
					<div class="selct">
						<div class="shan1" onclick="shan1(this)">×</div>
						<span style="font-size: 2.0em;color: white;position:relative ;top: 94px;left: 560px;font-family: '微软雅黑';">
							选择产品	
							</span>
					<span class="add2">加入购物车</span>		
						<ul>
							<li onclick="changing(this)" class="li">
								<div class="fans">
									<p class="circle1"><span class="circle2"></span></p>
									<img width="140" src="img/pms_1468287589.40786199!220x220.jpg" />
									<div class="font">
										<span>米家随身风扇 蓝色</span><br />
										<span style="color: orangered;">14.9元</span>
									</div>
								</div>
							</li>
							<li onclick="changing(this)" class="li">
								<div class="fans">
					<p class="circle1"><span class="circle2"></span></p>
									<img width="140" src="img/pms_1468287611.41694554!220x220.jpg" />
									<div class="font">
										<span>米家随身风扇 白色</span><br />
										<span style="color: orangered;">14.9元</span>
									</div>
								</div>
							</li>
						</ul>
						<div class="gomtk">
							加入购物车
						</div>
					</div>
				</div>
				<!--模态框确认删除-->
				<div id="tab_c">
					<div class="confirm">
						<h1>确定删除吗？</h1>
						<ul>
							<li class="quxiao">取消</li>

							<li class="queding">确定</li>

						</ul>
					</div>
				</div>
			

		
		<script type="text/javascript">
			var buy = document.getElementById("buy");
			inputs = buy.getElementsByTagName("input");
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					trs = this.parentNode.parentNode.parentNode.parentNode;
					dj = trs.children[2].innerHTML;
					var num = this.value;
					//console.log(num);
					var sum = dj * num;
					trs.children[4].innerHTML = sum;
				}
			};
			var quanxuan = document.getElementById("quanxuan");
			var span1= document.querySelector("#button1");
			var span2= document.querySelector("#button2");
			var span3= document.querySelector("#button3");
			var span4= document.querySelector("#button4");
				quanxuan.onclick = function() {
					if(quanxuan.className!="active")
					{ quanxuan.className="active";
						span1.className="active";
						span2.className="active";
						span3.className="active";
						span4.className="active";
					}
					else {quanxuan.className="";
					    span1.className="";
						span2.className="";
						span3.className="";
						span4.className="";
					              }
					footsum(0);
		           };
		
			function footsum() {
				var sum = 0;
				var buy = document.getElementById("buy");
				var trs = buy.children[0].children;
				for(var i = 1; i < trs.length; i++) {
						sum += parseFloat(trs[i].children[4].innerHTML);
					document.getElementById("foot").innerHTML = sum;
				}
			};

			function add1() {
				var showadd = document.getElementById("showadd");
				var add1 = document.getElementById("add1");
				add1.onclick = function() {
					showadd.style.display = "block";
				}
			};

			function shan(t) {
				var con = document.getElementById("tab_c");
				var quxiao = document.querySelector(".quxiao");
				var queding = document.querySelector(".queding");
				quxiao.onclick = function() {
					//	console.log(1);
					con.style.display = "none";
				}
				queding.onclick = function() {
					t.parentNode.parentNode.remove();
					con.style.display = "none";
					footsum();
				}
				con.style.display = "block";
			};

			function shan1(t) {
				var go = document.getElementById("go");
				var shan1 = document.querySelector(".shan1");
				shan1.onclick = function() {
					go.style.display = "none";
				}
			};
			function jian(t) {
				var n = 0;
				var sum = 0;
				var num = parseInt(t.parentNode.children[1].children[0].value);
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				//console.log(tr);
				if(num <= 1) {
					num = 1;
				} else {
					n = num - 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum = parseInt(dj * n) - sum;
				tr.children[4].innerHTML = sum;
				footsum();
			};

			function jia(t) {
				var sum = 0;
				var n = 0;
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				// 	console.log(tr);
				var num = parseInt(t.parentNode.children[1].children[0].value);

				if(num >= 20) {
					num = 20;
				} else {
					n = num + 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum += parseInt(dj * n);
				tr.children[4].innerHTML = sum;
				footsum();
			};
			function addtr(x){
				var tbody=document.getElementById("tdbody");
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = "<span id='button1'></span>";
				td1.className = "td1";
				var td2 = document.createElement("td");
				td2.innerHTML = x.parentNode.parentNode.children[0].innerHTML + x.parentNode.parentNode.children[1].innerHTML;
				var td3 = document.createElement("td");
				td3.innerHTML = x.parentNode.parentNode.children[2].innerHTML;
				var td4 = document.createElement("td");
				td4.innerHTML = '<div class="input"><span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span></div>';
				var td5 = document.createElement("td");
				td5.innerHTML = x.parentNode.parentNode.children[2].innerHTML;
				td5.className="td4";
				var td6 = document.createElement("td");
				td6.innerHTML = "<div class='shan' onclick='shan(this)'>×</div>";
				tbody.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
//				console.log(tbody.appendChild(tr));
			};
			//添加模态框商品_点击变色
			function  changing(t){
				var lis=t.parentNode.children;
				for (var i = 0; i < lis.length; i++) {
					lis[i].children[0].children[0].className="circle1";
				};
				var sel=t.children[0] .children[0];
				var sfl=t.children[0].children[0].firstElementChild;
				sel.className=sel.className=="circle1"?"active1":"circle1";
				sel.className=sfl.className=="circle2"?"active0":"circle2";
			}
				
		</script>
		
	</body>
</html>